<template>
  <view class="echarts-wrap">
    <qiun-data-charts type="ring" :chartData="chartData"  :opts="opts" />
  </view>
</template>

<script>
export default {
  name: "Pie",
  data() {
    return {
     chartData: {
             series: [
               {
                 name: "系列名称",
                 data: [
                   { name: "分类A", value: 30 },
                   { name: "分类B", value: 20 },
                   { name: "分类C", value: 50 }
                 ]
               }
             ]
           },
           opts: {
             color: ["#1890FF", "#91CB74", "#FAC858"], // 自定义颜色
             padding: [0, 0, 0, 0],
             dataLabel: true, // 是否显示数据标签
             extra: {
               ring: {
                 labelWidth: 10, // 数据标签到外圆的连线长度
                 border: true, // 是否绘制分割线
                 borderWidth: 3, // 分割线宽度
                 borderColor: "#FFFFFF" // 分割线颜色
               }
             }
           }
    };
  }
}
</script>

<style lang="scss" scoped>
.echarts-wrap {
  width: 100%;
  height: 480rpx;
  // border: 1px solid red;
  // box-sizing: border-box;
}
</style>